/*List of CSS3 Sass Mixins File to be @imported and @included as you need*/

@mixin css3-prefix($property, $value) {
  -webkit-#{$property}: #{$value};
  -khtml-#{$property}: #{$value};
  -moz-#{$property}: #{$value};
  -ms-#{$property}: #{$value};
  -o-#{$property}: #{$value};
  #{$property}: #{$value};
}

/* FLIP */
@mixin flip($scaleX: -1) {
  @include css3-prefix('transform', scaleX($scaleX));
  filter:            FlipH;
  -ms-filter:        "FlipH";
}

/* FONT FACE */
@mixin font-face($fontFamily: myFont, $eotFileSrc: 'myFont.eot', $woffFileSrc: 'myFont.woff', $ttfFileSrc: 'myFont.ttf') {
  font-family: $fontFamily;
  src: url($eotFileSrc)  format('eot'),
  url($woffFileSrc) format('woff'),
  url($ttfFileSrc)  format('truetype');
}

@mixin mixin-text($font-size, $color) {
  font-size: $font-size;
  color: $color;
}

/* OPACITY */
@mixin opacity($opacity: 0.5) {
  $opacityMultiplied: ($opacity * 100);

  filter:         alpha(opacity=$opacityMultiplied);
  -ms-filter:     "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + $opacityMultiplied + ")";
  @include css3-prefix('opacity', $opacity);
}

/* ROTATE*/
@mixin rotate($deg: 0, $m11: 0, $m12: 0, $m21: 0, $m22: 0) {
  @include css3-prefix('transform', rotate($deg + deg));
  filter: progid:DXImageTransform.Microsoft.Matrix(
                  M11=#{$m11}, M12=#{$m12}, M21=#{$m21}, M22=#{$m22}, sizingMethod='auto expand');
  zoom: 1;
}

/* TRANSFORM  */
@mixin transform($params) {
  @include css3-prefix('transform', $params);
}

/* TRANSFORM STYLE */
@mixin transform-style($style: preserve-3d) {
  @include css3-prefix('transform-style', $style);
}

/* TRANSITION */
@mixin transition($properties...) {

  @if length($properties) >= 1 {
    @include css3-prefix('transition', $properties);
  }

  @else {
    @include css3-prefix('transition', $what: all, $length: 1s, $easing: ease-in-out);
  }
}

/* KEYFRAMES */
@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @-ms-keyframes #{$animation-name} {
    @content;
  }
  @-o-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

/* ANIMATION */
@mixin animation($str) {
  @include css3-prefix('animation', $str);
}

/* RADIUS */
@mixin radius($tl:50%,$tr:50%,$br:50%,$bl:50%) {
  -moz-border-radius: $tl $tr $br $bl;
  -webkit-border-radius: $tl $tr $br $bl;
  border-radius: $tl $tr $br $bl;
}

@mixin radiusSimple($radius) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

/* button */
@mixin button($width, $height: 30px, $font-size: 13px, $color: #354052, $bg-color: #fff, $border-radius: 4px) {
  display: inline-block;
  width: $width;
  height: $height;
  line-height: $height;
  border-radius: $border-radius;
  background-color: $bg-color;
  font-size: $font-size;
  color: $color;
  text-align: center;
  cursor: pointer;
}

/*ellipsis*/
@mixin ellipsis($line: 1) {
  overflow : hidden;
  text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

/*clear fix*/
@mixin clearfixboth() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}